<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data">
      <v-coord type="rect" direction="LB" />
      <v-tooltip />
      <v-legend />
      <v-axis dataKey="State" :label="label" />
      <v-stack-bar :position="$t('otherJS.stateNumberProcesses')"  :color="$t('otherJS.processStatus')" />
    </v-chart>
  </div>

</template>

<script>
  const DataSet = require('@antv/data-set');

  export default {
    name: 'StackBar',
    props: {
      dataSource: {
        type: Array,
        required: true,
        default: () => [
          { 'State': this.$t('otherJS.leave'), '流转中': 25, '已归档': 18 },
          { 'State': this.$t('otherJS.aBusinessTravel'), '流转中': 30, '已归档': 20 },
          { 'State': this.$t('otherJS.workOvertime'), '流转中': 38, '已归档': 42},
          { 'State': this.$t('otherJS.car'), '流转中': 51, '已归档': 67}
        ]
      },
      height: {
        type: Number,
        default: 254
      }
    },
    data() {
      return {
        label: { offset: 12 }
      }
    },
    computed: {
      data() {
        const dv = new DataSet.View().source(this.dataSource);
        dv.transform({
          type: 'fold',
          fields: [this.$t('otherJS.inCirculation'), this.$t('otherJS.archived')],
          key: this.$t('otherJS.processStatus'),
          value: this.$t('otherJS.numberOfProcesses'),
          retains: ['State'],
        });
       return dv.rows;
      }
    }
  }
</script>